<template>
  <Header />
  <div>
     <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
     <van-field v-model="sign" label="个性签名" placeholder="请输入个性签名" />
     <van-field v-model="pass" label="密码" placeholder="请输入密码" />
  </div>
  <van-button 
   type="primary"
   color="#ffc400" 
   round block
   class="save-btn"
   @click="save">保存</van-button>
     <van-button 
     type="primary"
     color="#ffc400" 
     round block
     class="save-btn"
     @click="logOut">退出登录</van-button>
</template>

<script>
import { reactive,toRefs } from 'vue';
import Header from '../../components/Header.vue';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
export default {
  components:{ Header },
  setup(){
    const router = useRouter()
    const data = reactive({
      name:'',
      sign:"新的一年每天都开心",
      pass:''
    })

    //保存按钮：修改逻辑
    const save = ()=>{
      if(data.name && data.pass){
        // 
        let userInfo = JSON.parse(localStorage.userInfo)
        let newUserInfo = {
          user:data.name || userInfo.name,
          pass:data.pass || userInfo.pass
        }
        localStorage.setItem("userInfo",JSON.stringify(newUserInfo))
        Toast('保存成功')
        router.push("/mine")
      }else{
        Toast("请输入内容")
      }
    }
    //退出登录按钮：
    const logOut = ()=>{
      localStorage.removeItem('isLogin')
      router.push("/login")
      Toast("退出成功")
    }

    return {
      save, logOut,...toRefs(data)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger {
  background-color: #ffc400;
  border-color: #ffc400;
}
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>